<template>
  <div>
    <HomeHeader />
    <div class="content">
      <!-- 滑动分类栏 -->
      <van-tabs v-model:active="activeId" @change="switchCate">
        <van-tab v-for="cate in cates" :name="cate.id" :title="cate.name">
          <!-- 轮播和宫格导航 -->
          <div v-if="(activeId === homeId)">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for="banner  in banners" :key="banner.id">
                <img :src="banner.picUrl" alt="">
              </van-swipe-item>
            </van-swipe>
            <van-grid clickable>
              <van-grid-item 
                :icon="cate.icon" 
                :text="cate.name" 
                v-for="cate in cates" 
                :key="cate.id" 
                :to="{
                  path: '/itemLists',
                  query: {
                    cateId: cate.id
                  }
                }"
              />
            </van-grid>
          </div>
          <!-- 轮播和宫格导航 -->
          <!-- 商品列表 -->
          <div v-if="!items.length">暂无商品</div>
          <van-list v-model:loading="loading" :finished="finished" 
            finished-text="没有更多了" 
            :immediate-check="false"
            @load="reachBottom">
            <div class="items">
              <div class="item" 
                @click="enterDetail(item.id)"
                v-for="item in items" :key="item.id">
                <img :src="item.pic" class="item-img" alt="">
                <div class="item-info">
                  <h5>{{ item.name }}</h5>
                  <div class="item-action">
                    <p>￥{{ item.minPrice }}</p>
                    <van-icon @click.stop="addItemToCart(item.id)" size="26" class-prefix="icon" name="gouwuchetianjia" />
                  </div>
                </div>
              </div>
            </div>
          </van-list>
          <!-- /商品列表 -->
        </van-tab>
      </van-tabs>
      <!-- /滑动分类栏 -->
      <van-back-top bottom="60"/>
    </div>
    <CommonTabbar />
  </div>
</template>

<script setup lang="ts" name="Home">
import CommonTabbar from '@c/CommonTabbar.vue'
import HomeHeader from './components/HomeHeader.vue'
import { fetchCates, fetchHomeBanner, fetchItems, addCart } from '@a/index'
import { ref, onMounted } from 'vue'
import type { cateType } from './type'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

// 加入购物车
const addItemToCart = (goodsId: number) => {
  addCart({
    goodsId,
    number: 1
  }).then(res => {
    if (res.data.code === 0) {
      // 加入购物车成功
      showToast({
        message: '加入购物车成功'
      })
    }
    
  })
}

// 跳转详情
const router = useRouter();
const enterDetail = (id:number) => {
  router.push({
    path: '/detail',
    query: {
      id
    }
  })
}
// 顶部滑动 分类功能
let homeId = -1
const activeId = ref<number>(-1);
const cates = ref<Array<cateType>>([])
// 请求所有分类
const fetchItemCates = (params = {}) => {
  fetchCates(params).then((res: { data: { code: number; data: cateType[]; }; }) => {
    if (res.data.code === 0) {
      cates.value = res.data.data
      activeId.value = res.data.data[0].id
      homeId = res.data.data[0].id
      // 所有分类获取 activeId初始值 为第一个分类时 请求商品列表
      fetchItemsByCateId(activeId.value)
    }
  })
}
// 顶部滑动 分类功能

// 首页轮播
const banners = ref<Array<any>>([])
const fetchBanners = () => {
  fetchHomeBanner().then(res => {
    if (res.data.code === 0) {
      banners.value = res.data.data
    }

  })
}
// 首页轮播

// 点击tab 切换不同分类的商品列表数据
const switchCate = () => {
  // 上拉加载分页状态 初始化
  items.value = []
  finished.value = false
  page.value = 1
  // 重新请求商品列表即可
  fetchItemsByCateId(activeId.value)
}

// 上拉加载 商品列表
const loading = ref<boolean>(false);
const finished = ref<boolean>(false)
const reachBottom = () => {
  /* 
    触底事件发生后
    page+1
    重新请求
  */
  page.value++
  fetchItemsByCateId(activeId.value)
  
}
// 上拉加载商品列表

// 首页商品列表
const items = ref<Array<any>>([])
const page = ref<number>(1)
const pageSize = ref<number>(5)
const fetchItemsByCateId = (cateId: number) => {
  fetchItems({
    categoryId: cateId,
    page: page.value,
    pageSize: pageSize.value
  }).then(res => {
    // 数据成功将loading状态 变成false
    loading.value = false
    if (res.data.code === 0) {
      items.value = [
        ...items.value,
        ...res.data.data.result
      ]
    }
    if (res.data.code === 700) {
      finished.value = true
    }
  })
}
// 首页商品列表
onMounted(() => {
  fetchItemCates()
  fetchBanners()
})
</script>

<style scoped lang="scss">
.content {
  padding: 50px 0;

  .my-swipe {
    width: 10rem;
    height: 5rem;

    img {
      width: 10rem;
      height: 5rem;
    }
  }

  .item {
    display: flex;
    padding: 10px;
    background-color: #fff;
    margin-top: 10px;

    img {
      width: 120px;
    }

    .item-info {
      flex: 1;
      padding: 0 10px;

      h5 {
        line-height: 40px;
      }

      .item-action {
        display: flex;
        justify-content: space-between;

        p {
          font-size: 20PX;
          color: #ec1109;
        }

      }
    }
  }
}
</style>